<template>
    <div class="notice_list">
        <el-card class="box-card">
            <div v-for="notice in result.list" :key="notice.notice_id" class="text item">
                <div @click="detail(notice.notice_id)">
                    <el-card>
                        <h2>{{ notice.title }}</h2>
                        <el-tag size="medium ">发布时间:{{ format(notice.create_time).format }}</el-tag>
                        <el-tag size="medium ">修改时间:{{ format(notice.update_time).format }}</el-tag>
                    </el-card>
                </div>
            </div>
        </el-card>
        <div style="margin-top:10px">
            <div class="block">
                <el-pagination :current-page="currentPage" :page-size="pageSize" layout="total,  prev, pager, next,jumper"
                    :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import dateTime from '@/utils/date_time';
export default {
    data() {
        return {
            result: [],
            pageSize: 4,
            pagerCount: 0,
            total: 0,
            currentPage: 1,
        }
    },
    methods: {
        detail(id) {
            this.$router.push({ name: 'notice_detail', params: { notice_id: id } }, () => { }, () => { });
        },
        format(create_time) {
            return dateTime.dateTime(create_time)
        },
        handleCurrentChange(val) {
            console.log(val);
            let that = this;
            axios.get('http://127.0.0.1:5000/api/notice/get_list', {
                params: {
                    page: val,
                    size: 4
                }
            })
                .then(function (response) {
                    console.log(response.data.result);
                    that.result = response.data.result;

                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
    },
    created: function () {
        let that = this;
        if (that.$route.params.currentPage) {
            that.currentPage = that.$route.params.currentPage;
        }
        axios.get('http://127.0.0.1:5000/api/notice/get_list', {
            params: {
                page: that.currentPage,
                size: 4
            }
        })
            .then(function (response) {
                console.log(response.data.result);
                that.result = response.data.result;
                that.total = Number.parseInt(response.data.result.count);
                that.pagerCount = that.total % that.pageSize;
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 100%;
}
</style>